<template>
	<div class="wrapper">
		<el-form :model="forms">
			<el-form-item>
				<q-multiple-select-check-box
					v-model="forms.opt"
					:options="options"
					:select-all="true"
					:disabled-option="item => item.online === 2"
					:multiple-limit="3"
					:data-map="{ key: 'value', name: 'label' }"
					:disable-tip-content="'online为2且选择超过3条数据时置灰'"
				/>
			</el-form-item>
		</el-form>
	</div>
</template>
<script setup lang="ts">
	import { ref, reactive } from 'vue';
	const forms = reactive({
		opt: [],
	});

	const options = ref([
		{
			key: 'Option1',
			name: 'name1',
			online: 1,
		},
		{
			key: 'Option2',
			name: 'name2',
			online: 1,
		},
		{
			key: 'Option3',
			name: 'name3',
			online: 2,
		},
		{
			key: 'Option4',
			name: 'name4',
			online: 1,
		},
		{
			key: 'Option5',
			name: 'name5',
			online: 1,
		},
	]);
</script>
<style lang="scss">
	.wrapper {
		padding: 20px;
	}
</style>
